<template>
    <div class="renz_info">
		<div class="header">
			<van-nav-bar
				title="教职认证"
                left-arrow
				/>
		</div>
        <div class="renz_con">
            <van-field
                readonly
                clickable
                label="学校名称"
                :value="schoolname"
                placeholder="选择学校名称"
                @click="showPicker = true"
            />
            <van-popup v-model="showPicker" position="bottom">
                <van-picker
                show-toolbar
                :columns="schoolcolumns"
                @cancel="showPicker = false"
                @confirm="onConfirms"
                />
            </van-popup>
            <van-field
                readonly
                clickable
                label="职位"
                :value="zhiname"
                placeholder="选择您的职位"
                @click="showPickerz = true"
            />
            <van-popup v-model="showPickerz" position="bottom">
                <van-picker
                show-toolbar
                :columns="zhicolumns"
                @cancel="showPickerz = false"
                @confirm="onConfirmz"
                />
            </van-popup>
            <!-- <p><span>学校名称</span><input type="text" placeholder="选择学校名称"></p> -->
            <!-- <p><span>职位</span><input type="text" placeholder="选择您的职位"></p> -->
            <p><span>真实姓名</span><input type="text" placeholder="请输入个人姓名与身份证名字保持一致"></p>
            <p><span>身份证号</span><input type="text" placeholder="请输入个人身份证号"></p>
            <div class="clear"></div>
            <p style="color:red;font-size:0.8rem; width:100%">注：认证成功后不可修改</p>
            <div style="height:40px;"></div>
        </div>
        <div class="renz_foot">
            <van-button type="info">提交认证</van-button>
        </div>
	</div>
</template>
<script>
export default {
    data() {
        return {
            //学校
            schoolname: '',
            showPicker: false,
            schoolcolumns: ['xuexiao1', 'xuexiao2', 'xuexiao3', 'xuexiao4'],
            //职位
            zhiname: '',
            showPickerz: false,
            zhicolumns: ['zhiwei1', 'zhiwei2', 'zhiwei3', 'zhiwei4'],
        }
    },
    mounted:function(){
        
    },
    methods:{
        onConfirms(value) {
            this.schoolname = value;
            this.showPicker = false;
            console.log(this.schoolname);
        },
        onConfirmz(value) {
            this.zhiname = value;
            this.showPickerz = false;
            console.log(this.zhiname);
        },
    }
}
</script>
<style scoped="scoped">
    .clear{
        clear: both;
    }
    .renz_info{
        height: 100vh;
        background-color: #fff;
    }
	.header>>>.van-cell__title{
		  width: 63px !important;
	}
	.header >>> .van-icon-arrow-left{
		color: #fff;
	}
    .van-nav-bar__title{
        color: #fff;
    }
    .renz_con{
        width: 100vw;
        box-sizing: border-box;
        padding:2vh 9vw;
        background-color: #fff;
    }
    .renz_con p{
        text-align: left;
        height:44px;
        font-size: 0.9rem;
        padding: 1vh 0;
        margin: 0;
    }
    .renz_con p span{
        line-height: 7vh;
    }
    .renz_con p input{
        float: right;
        width: 56vw;
        padding: 0 2vw;
        border-radius: 4px;
        border: 0.032rem solid #ccc;
        height: 43px;
    }
    .renz_con >>> .van-field__control{
        /* float: right; */
        width: 60vw;
        /* float: right; */
        padding: 0 2vw;
        border-radius: 4px;
        border: 0.032rem solid #ccc;
        height: 43px;
    }
    .renz_con >>> .van-field{
        padding: 1vh 0;
        font-size: 0.9rem;
        /* border-bottom: 1px solid #fff !important; */
    }
    .van-cell:not(:last-child)::after{
        border: none;
    }
    .renz_con >>> .van-field__label{
        width: 21.7vw;
        text-align: left;
        margin-top: 1.8vh;
    }
    .renz_foot{
        width: 100%;
        position:fixed;
        bottom: 0;
    }
    .renz_foot >>>.van-button{
        width: 100%;
    }
</style>

